<template>
  <div class="field-action-editor">
    <template>
      <div class="field-action-editor-title">
        权限操作详情
      </div>
      <div class="field-action-editor-body">
        <template v-if="!!action">
          <div class="property-wrapper" >
            <Row :label-width="labelWidth" :inline="true" label="权限操作名称">
              <a-input :disabled="action.presetAction" v-model="action.actionName"/>
            </Row>
            <Row :label-width="labelWidth" :inline="true" label="操作类型">
              <a-select :disabled="action.presetAction" v-model="action.actionType">
                <a-select-option v-for="item in actionTypes" :value="item.value">
                  {{ item.title }}
                </a-select-option>
              </a-select>
            </Row>
            <a-button shape="round" icon="edit" @click="openSubFormAction" type="primary">明细表操作</a-button>
          </div>
          <SubFormAction :form-definition="formDefinition" ref="SubFormAction" :subForms="action && action.subFormActions || []"/>
          <FieldActionList :formDefinition="formDefinition" :fieldActions="action && action.fieldActions || []"/>
        </template>
        <template v-else>
          <div class="field-action-editor-body-large-button-wrapper">
            <LargeButton @click="$emit('addNew')" icon="e666" title="新建操作权限"/>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>
<script>
import {createProps} from '@/utils';
import Row from '@/components/hhd/design/FormDesigner/base/Row.vue';
import {actionTypes} from '@/components/hhd/design/Constants';
import HTable from '@/components/hhd/design/HTable/HTable.vue';
import FieldActionList from '@/components/hhd/design/FormAction/FieldActionList.vue';
import SubFormAction from '@/components/hhd/design/FormAction/SubFormAction.vue';
import LargeButton from '@/components/hhd/design/FormMenu/LargeButton.vue';

export default {
  name: 'FieldActionEditor',
  components: {LargeButton, SubFormAction, FieldActionList, HTable, Row},
  props: {
    action: createProps(Object, () => undefined),
    formDefinition: createProps(Object, () => undefined),
  },
  data() {
    return {
      labelWidth: '120px',
      actionTypes
    };
  },
  methods: {
    openSubFormAction() {
      this.$refs.SubFormAction.open();
    },
  }
};
</script>
<style>
.field-action-editor {
  background: white;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.field-action-editor-title {
  border-bottom: 1px solid #e2e4e9;
  width: 100%;
  padding: 10px 15px;
  font-weight: bold;
  height: fit-content;
}

.field-action-editor-body .property-wrapper {
  padding: 10px;
}

.field-action-editor-body {
  flex: 1;
  overflow: auto;
}

.field-action-editor-body-large-button-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>